<template>
  <div class="video-study">
    <div class="nav-top" ref="header">
      <nav-bar :isFixed="true" :title="'培训课程'"></nav-bar>
      <video-player
        class="video-box video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @ready="playerReadied"
      ></video-player>
      <div class="video-title">
        {{ videoObj.className }}
      </div>
    </div>
    <van-tabs :offset-top="offsetTop" v-model="active" scrollspy sticky>
      <van-tab title="学习进度">
        <div class="plan-box">
          <div>
            <div class="schedule-box" v-if="videoObj.status == 2">
              当前课程已学习{{
                currentTime / 100 >= videoObj.passingTime
                  ? videoObj.passingTime
                  : currentTime / 100
              }}分钟，学习满{{ videoObj.passingTime }}分钟可完成本节课学习。
            </div>
            <div class="schedule-box" v-if="videoObj.status == 3">
              当前课程已学习完毕,可重复观看。
            </div>
          </div>
          <myTitle title="学习进度"></myTitle>
          <div class="on-off-lin"></div>
          <studyPlan
            :titleOne="'正在学习'"
            :playList="playList"
            @handSta="handSta"
          ></studyPlan>
        </div>
      </van-tab>
      <van-tab title="课程介绍">
        <div class="plan-box">
          <myTitle title="课程介绍"></myTitle>
          <div class="on-off-lin"></div>
          <div class="v-html-box v-html-img" v-html="courseIntroduction"></div>
        </div>
      </van-tab>
      <van-tab title="课件内容">
        <div class="plan-box">
          <myTitle title="课件内容"></myTitle>
          <div class="on-off-lin"></div>
          <div
            class="v-html-box v-html-img"
            v-html="videoObj.classIntroduction"
          ></div>
        </div>
      </van-tab>
      <van-tab title="课件内容">
        <div class="plan-box">
          <myTitle title="课件内容"></myTitle>
          <div class="on-off-lin"></div>
          <div class="v-html-box v-html-img" v-html="videoObj.classNotes"></div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import navBar from "@/components/NavBar";
import studyPlan from "@/components/studyPlan/index.vue";
import myTitle from "@/components/myTitle/index.vue";
export default {
  name: "ActivityList",
  components: {
    navBar,
    studyPlan,
    myTitle,
  },
  data() {
    return {
      offsetTop: 0,
      active: 0,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            src: "",
          },
        ],
        poster: "", // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: true,
          fullscreenToggle: true, // 全屏按钮
        },
      },
      courseId: "",
      classId: "",
      videoObj: {},
      videoUrl: config.imgUrl,
      playList: [],
      courseIntroduction: "",
      currentTime: 0,
    };
  },
  mounted() {
    // /course/unlockCourseProgress
    // require
    this.currentTime = localStorage.getItem("currentTime") || 0;
    //设置吸顶的距离
    this.offsetTop = this.$refs.header.offsetHeight + 46;
    this.courseId = this.$route.query.courseId;
    this.classId = this.$route.query.classId;
    this.courseIntroduction = this.$route.query.courseIntroduction;
    console.log(
      this.$route.query.courseIntroduction,
      "路由参数",
      this.$refs.header,
      "ww"
    );
    this.init();
  },
  methods: {
    async handSta(item) {
      this.classId = item.classId;
      switch (item.status) {
        case 1: //点击解锁
          let unlockCourseProgress = await this.$request({
            url: "/course/unlockCourseProgress",
            method: "post",
            data: { courseId: this.courseId },
          });
          if (unlockCourseProgress.code == 200) {
            this.$toast.success("解锁成功!");
          } else {
            this.$toast.fail(unlockCourseProgress.content);
          }
          this.initList();
          break;
        case 2: //立即学习
          this.classId = item.classId;
          this.init();
          break;
        case 3: //学习完成
          this.init();
          break;

        default:
          break;
      }
    },
    async initList() {
      let findCourseProgressList = await this.$request({
        url: "/course/findCourseProgressList",
        method: "post",
        data: { courseId: this.courseId },
      });
      this.playList = findCourseProgressList.data;
      this.playList.forEach((item) => {
        if (item.classId == this.videoObj.classId) {
          this.$set(this.videoObj, "status", item.status);
        }
      });
    },
    async init() {
      //查询学习进度列表
      // this.courseId = this.$route.query.courseId;
      // this.classId = this.$route.query.classId;
      let findCourseProgressList = await this.$request({
        url: "/course/findCourseProgressList",
        method: "post",
        data: { courseId: this.courseId },
      });
      this.playList = findCourseProgressList.data;
      //查询单个课时
      let findClassTableOne = await this.$request({
        url: "/course/findClassTableOne",
        method: "post",
        data: { classId: this.classId },
      });
      this.videoObj = findClassTableOne.data;
      this.playList.forEach((item) => {
        if (item.classId == this.videoObj.classId) {
          this.$set(this.videoObj, "status", item.status);
        }
      });
      this.playerOptions.sources[0].src =
        this.videoUrl + this.videoObj.videoUrl;
      console.log(this.videoObj, "学习进度", this.playList);
    },
    onPlayerPlay() {},
    //监听暂停
    onPlayerPause(player) {
      console.log(player);
      // this.$refs.videoPlayer.player.pause();
    },
    //监听媒体是否已到达结尾，播放完
    onPlayerEnded(player) {
      if (this.videoObj.status == 2) {
        console.log(player, "播放完毕", storage.get("currentTime"));
        localStorage.setItem("currentTime", 0);
        return;
      }
    },
    //当前播放位置发生变化时触发。
    async onPlayerTimeupdate(player) {
      let currTime = parseInt(player.cache_.currentTime);

      if (currTime && this.videoObj.status == 2) {
        console.log(this.videoObj, "只有状态2才会进入");
        localStorage.setItem("currentTime", currTime);
        let courseId = this.videoObj.courseId;
        let time = currTime / 60;
        if (parseInt(time) >= this.videoObj.passingTime) {
          this.videoObj.status = 3;
          let res = await this.$request({
            url: "/course/completeCourseProgress",
            method: "post",
            data: { courseId },
          });
          localStorage.setItem("currentTime", 0);
          this.initList();
          this.$toast.success("当前课程已完成!");
          // /course/completeCourseProgress
        }
      }
    },
    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
    playerReadied(player) {
      // seek to 10s
      if (this.videoObj.status == 3) {
        player.currentTime(0);
        return;
      }
      if (localStorage.getItem("currentTime")) {
        player.currentTime(localStorage.getItem("currentTime"));
      }
    },
  },
};
</script>

<style lang="scss">
@import "../assets/css/base";
.video-study {
  padding-bottom: px2rem(160);
  .video-title {
    height: 60px;
    padding: 0 px2rem(30);
    line-height: 60px;
    box-sizing: border-box;
    font-size: px2rem(36);
    font-weight: bold;
    color: #333;
  }
  .schedule-box {
    width: 100%;
    padding: px2rem(20) px2rem(30);
    background-color: #ffd1d1;
    font-size: px2rem(30);
    color: #d73030;
    border-radius: 4px;
    box-sizing: border-box;
    line-height: 22px;
  }
  .nav-top {
    width: 100%;
    height: 100%;
    position: sticky;
    top: 46px;
    background-color: #fff;
    z-index: 9999999;
  }
  .van-sticky--fixed {
    // top: 216px;
  }
  .video-box {
    margin-top: 46px;
    width: 100%;
    height: px2rem(420);
    .vjs-big-play-button {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      // width: 70px;
      // height: 70px;
      // border-radius: 50%;
    }
  }
  .plan-box {
    margin-top: px2rem(40);
    padding: 0 px2rem(30);
    box-sizing: border-box;
  }
  .v-html-box {
    p {
      font-size: px2rem(30);
      line-height: 22px;
    }
  }
}
</style>
